<script>
import { api } from '@/api';
import { Badge, Button, Cell, Search, SwipeCell, Toast } from 'vant';
import { mapStores } from 'pinia'
import { useAppStore } from '@/stores/app';
import useContactsStore from '@/stores/contacts';
import FriendsList from '@/components/FriendsList.vue';
import GroupsList from '@/components/GroupsList.vue';


export default {
  components: {
    Search,
    SwipeCell,
    Button,
    Cell,
    FriendsList,
    GroupsList,
    Badge
  },
  computed: {
    ...mapStores(useAppStore, useContactsStore),
    friendBadgeCount() {
      const count = this.contactsStore.waitingConfirmRequests.length
      return count > 0 ? (count >= 99 ? '99+' : count) : undefined
    },
    groupBadgeCount() {
      const count = this.contactsStore.groups.length
      return count
    }
  },
  data() {
    return {
      searchText: '',
      searchResult: [],
    }
  },
  created() {
    this.contactsStore.refreshFriends()
    this.contactsStore.refreshNewFriends()
    this.contactsStore.refreshGroups()
  },
  methods: {
    async handleSearch() {
      this.searchResult = []
      if (!this.searchText) return
      const loading = Toast.loading({ message: '加载中...', overlay: true })
      const { data } = await api.friends.search({ userName: this.searchText })
      loading.clear()
      this.searchResult = data.filter(item => item.user_name !== this.appStore.userInfo.username).map(item => ({
        ...item,
        friend_name: item.user_name,
        nickName: item.nick_name,
        isFriend: this.contactsStore.friends.some(({ friend_name }) => friend_name === item.user_name)
      }))
    },
  },
}
</script>

<template>
  <div class="contacts-view">
    <Search 
      v-model="searchText"
      shape="round"
      placeholder="搜索或添加好友(UID / UName / 昵称)"
      show-action
      @search="handleSearch"
    >
      <template #action>
        <div @click="handleSearch">搜索</div>
      </template>
    </Search>
    
    <Cell is-link to="/new-friends">
      <template #icon>
        <img style="border-radius: 4px; width: 6.4vw; height: 6.4vw; margin-right: 10px;" src="../../assets/icons/new-firends.png" alt="">
      </template>
      <template #title>
        新的朋友 <Badge :content="friendBadgeCount" />
      </template>
    </Cell>
    <Cell is-link to="/group-list">
      <template #icon>
        <img style="border-radius: 4px; width: 6.4vw; height: 6.4vw; margin-right: 10px;" src="../../assets/icons/group.png" alt="">
      </template>
      <template #title>
        我的群聊 ({{ groupBadgeCount }})
      </template>
    </Cell>
    <!-- 我的群聊 -->
    <!-- <GroupsList :search-text="searchText" /> -->
    <!-- 好友列表 -->
    <FriendsList :search-text="searchText" :search-result="searchResult" />
  </div>
</template>

<style lang="less" scoped>
.contacts-view {
  height: 100%;

  /deep/ .van-search--show-action {
    padding-right: 1.6vw;
  }

  /deep/ .van-search__action:active {
    background-color: transparent;
  }

  .contacts-item-avatar {
    object-fit: cover;
  }

  .van-swipe-cell {
    &:not(:last-child) {
      .contacts-item {
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }

  .list-group {
    padding: 0 15px;
    font-size: 14px;
    color: #bbb;
  }

  .contacts-item-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    height: 100%;

    .contacts-item-action {
      padding: 0 5px;
      height: 40px;
      line-height: 40px;
    }
  }

  .contacts-item-action-reject {
    color: #f44;
    font-size: 14px;
  }

  .contacts-item-action-agree {
    font-size: 14px;
    color: #07c160;
  }

  /deep/ .contacts-list {
    .contacts-list-title {
      padding: 15px 15px 0;
      font-size: 14px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .contacts-list-empty {
      padding: 15px;
      font-size: 12px;
      color: #999;
    }
    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 20px;
    }
    .contacts-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 15px 0;
      margin: 0 15px;

      .contacts-item-info {
        display: flex;
        align-items: center;
        gap: 15px;
        overflow: hidden;
      }

      .contacts-item-send {
        width: 24px;
        height: 24px;
      }

      &-avatar {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        object-fit: cover;
      }

      .contacts-item-name {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 16px;
        overflow: hidden;

        >div {
          text-overflow: ellipsis;
          overflow: hidden;
          text-wrap: nowrap;
        }

        .contacts-item-uid {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
</style>
